<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title> </title>
<style type='text/css'>
ul {
  margin:0;
  padding:0;
  width:250px;
  list-style:none;
  }
li {
  cursor:pointer;
  margin:8px;
  }
div {
  height:0;
  overflow:hidden;
  margin-top:8px;
  }
p {
  margin:0;
  padding:7px;
  background-color:#ccf;
  border:1px solid #333;
  }
</style>
<script  type='text/javascript' src='../../animation.js' ></script>
<script  type='text/javascript' src='../../animationExtensions.js' ></script>
<script type='text/javascript'>
onload=function()
{
  var h2s=document.getElementsByTagName('h2'), h2=null, i=0;
  for( ; h2=h2s[i]; i++)
  {
    h2.onclick=function(){this.parentNode.getElementsByTagName('div')[0].animateHeight()};
  }
}
</script>
</head>

<body>
<ul>
  <li><h2>Title 1</h2>
  <div><p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nunc nunc, euismod sed, luctus ut, gravida quis, massa. Suspendisse interdum tincidunt ipsum. Sed ultricies velit. Nunc et mauris. Suspendisse sodales varius nisl. Donec pellentesque massa ac elit. Fusce dignissim aliquet nisi. Fusce mauris urna, porta at, dictum nec, tempor vitae, purus. Aenean ut odio. Vestibulum et nisl quis ante mattis commodo. Integer enim. Nam nibh. Quisque sed orci ac mauris placerat lobortis. Sed et erat.
  </p></div>
  <li><h2>Title 2</h2>
  <div><p>
  Aliquam nulla. Vestibulum dignissim velit. Nam sit amet dolor eget neque ullamcorper pretium. Donec consectetuer sem eu ante. Nunc rutrum, nunc ut sollicitudin aliquet, erat mi suscipit elit, et tincidunt tortor libero et augue. Ut eu metus adipiscing odio cursus convallis. Fusce eget arcu. Mauris congue lacus sed lacus. Pellentesque quis neque. Aliquam venenatis. Vivamus viverra nonummy ante. Mauris non metus porta lectus tempus congue. Vestibulum elementum ligula sit amet nunc. Nam tellus massa, blandit vel, scelerisque iaculis, pharetra nec, est.
  </p></div>
  <li><h2>Title 3</h2>
  <div><p>
  Ut et mi id velit fringilla sagittis. Aliquam ullamcorper. Quisque dolor sapien, facilisis non, fringilla vitae, lobortis quis, dui. Curabitur lorem eros, porttitor quis, scelerisque eu, varius eget, turpis. Aliquam mollis, risus a feugiat tempus, elit eros hendrerit justo, in varius metus elit et dui. Cras ultrices, eros vitae lacinia varius, magna neque varius dolor, commodo vestibulum dolor odio a ipsum. Mauris pretium, eros vitae ornare vulputate, lacus velit tempus nunc, vitae interdum tellus libero in orci. Maecenas at sapien. In hac habitasse platea dictumst. Quisque volutpat nisl suscipit dolor. 
  </p></div>
  <li><h2>Title 4</h2>
  <div><p>
  Maecenas porttitor, lacus at egestas euismod, risus nunc imperdiet sapien, ut nonummy tortor tortor pretium metus. Aliquam erat volutpat. Nam pretium, risus et aliquam cursus, massa purus sollicitudin nibh, sed ornare purus leo vel tortor. Proin molestie, eros ac auctor blandit, ante felis sagittis est, quis commodo odio felis id neque. Etiam nec est. Nulla venenatis, velit non volutpat sagittis, enim dolor rutrum purus, ac lacinia dolor erat eget elit. Maecenas facilisis, lectus eu tempus porttitor, ante nisi tempor erat, eget mattis nisi libero eu nisi. Vestibulum non lectus. Nam vestibulum nunc vel tortor. Aliquam arcu sapien, fermentum mattis, condimentum suscipit, porttitor eu, libero. Sed bibendum, ligula non congue facilisis, ipsum dui ornare lacus, at sagittis nibh neque nec odio. Suspendisse euismod fringilla tortor. Donec egestas gravida risus. In arcu. Quisque turpis. Quisque felis. Vivamus tempor elit sit amet justo. Quisque condimentum urna nec quam. Aenean sit amet libero. In felis. 
  </p></div>
  <li><h2>Title 5</h2>
  <div><p>
  Duis dapibus neque nec lorem. Aliquam erat volutpat. In congue ultricies ante. Mauris eu est in turpis porta imperdiet. Cras interdum suscipit purus. Nunc dignissim. Cras rutrum ornare tellus. Nunc in ante nec elit iaculis sollicitudin. Morbi pellentesque aliquam quam. Mauris aliquam gravida lorem. Aenean a dui in neque tempus pulvinar. Cras mattis nisi et nisl. Donec ac dui a felis aliquet euismod. Curabitur dapibus turpis eget diam. Nunc at nulla ut dui gravida sollicitudin. Sed laoreet quam a lacus. Aliquam eget orci. Integer dignissim turpis id nunc. 
  </p></div>
  <li><h2>Title 6</h2>
  <div><p>
  Duis dapibus neque nec lorem. Aliquam erat volutpat. In congue ultricies ante. Mauris eu est in turpis porta imperdiet. Cras interdum suscipit purus. Nunc dignissim. Cras rutrum ornare tellus. Nunc in ante nec elit iaculis sollicitudin. Morbi pellentesque aliquam quam. Mauris aliquam gravida lorem. Aenean a dui in neque tempus pulvinar. Cras mattis nisi et nisl.
  </p></div>
 </ul>
 <p style="position: absolute; bottom: 1em; left: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </p>
</body>
</html>
